<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    disableScroll: true,
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar :type="SearchTypeEnum.BOOK" />

  <view class="uni-margin-wrap">
    <!-- <view class="type-box">
      <view class="text" v-for="(item, index) in typeList" :key="item" @tap="clickType(index)">
        <text>{{ item }}</text>
      </view>
    </view>
    <uni-transition
      ref="cursor"
      custom-class="custom-transition"
      :show="true"
      mode-class="slide-left"
    /> -->
    <!-- <swiper class="swiper" :current="activeIndex" @change="changeSwiper">
      <swiper-item class="swiper-item" v-for="(pageDataItems, index) in dataList" :key="index"> -->
    <scroll-view
      :scroll-top="scrollTop"
      :scroll-y="true"
      class="scroll-Y"
      refresher-enabled
      :refresher-triggered="isTriggered"
      @refresherrefresh="upper"
      @scrolltolower="lower"
    >
      <uni-card
        :title="'《' + recordItem.bookName + '》'"
        :isFull="true"
        :extra="'闲置'"
        :thumbnail="recordItem.bookAvatar"
        v-for="recordItem in allList"
        :key="recordItem.id"
      ></uni-card>
      <uni-load-more
        v-if="allList.length > 7"
        class="loading-text"
        :status="loadingStatus"
        :content-text="MORE_MSG_OBJ"
      />
      <div style="width: 100rpx; height: 300rpx"></div>
    </scroll-view>
    <!-- </swiper-item>
    </swiper> -->
  </view>
</template>

<script lang="ts" setup>
import { OrderDirection, OrderStatus } from '@/enums/OrderStatus'
import CustomNavbar from './components/CustomNavbar.vue'
import { PageParam } from '@/types/global'
import { myPendingBookListApi } from '@/service/book'
import { Order } from '@/types/order'
import { Book } from '@/types/book'
import { SearchTypeEnum } from '@/enums/SearchTypeEnum'
import { MORE_MSG_OBJ } from '@/store/contants'

const activeIndex = ref()
const cursor = ref()

const scrollTop = ref(0)
const isTriggered = ref(false)
const loadingStatus = ref()

const allPageParams: Required<PageParam> = { page: 1, size: 10 }

const allList = ref<Book[]>()

onLoad(async () => {
  const pendingListRes = await myPendingBookListApi({
    page: allPageParams.page,
    size: allPageParams.size,
  })
  allList.value = pendingListRes.data.records
})

// 触发下拉刷新
const upper = async () => {
  console.log('下拉刷新')
  isTriggered.value = true
  const pendingListRes = await myPendingBookListApi({
    page: allPageParams.page,
    size: allPageParams.size,
  })
  allList.value = pendingListRes.data.records
  setInterval(() => {
    isTriggered.value = false
  }, 1000)
}
const lower = async () => {
  if (allList.value.length < 10) {
    return
  }
  loadingStatus.value = 'loading'
  allPageParams.page++
  const pendingListRes = await myPendingBookListApi({
    page: allPageParams.page,
    size: allPageParams.size,
  })
  if (pendingListRes.data.records.length !== 0) {
    allList.value.push(...pendingListRes.data.records)
    loadingStatus.value = 'more'
    return
  }
  allPageParams.page--
  uni.showToast({
    title: '没有了',
    icon: 'none',
  })
  loadingStatus.value = 'noMore'
}

const params = defineProps<{
  type: number
}>()
onLoad(() => {
  console.log(params.type)
  activeIndex.value = params.type
  // #ifdef MP-ALIPAY
  activeIndex.value = 0
  // #endif
})
</script>

<style lang="scss">
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.type-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 10rpx;
}

.type {
  border-bottom: 1px solid red;
}

.text {
  width: 25%;
  text-align: center;
}
/* 如果使用 scss 需要使用 /deep/  */
.custom-transition {
  position: absolute;
  width: 22%;
  height: 7rpx;
  margin-top: 7rpx;
  background-color: $main-color;
}

.swiper {
  height: calc(100vh - var(--window-top));
  margin-top: 10rpx;

  .swiper-item {
    .uni-body {
      font-size: 32rpx;
      color: #a5a5a5;
    }
  }
}

.scroll-Y {
  width: 100%;
  height: calc(100vh - var(--window-top));
}
</style>
